﻿<script>
    var funkySlide = function () {
        $('.clonespace').each(function (index, clonespace) {
            $('.slider', clonespace).each(function (index2, element) {
                setTimeout(function () {
                    $(element).enqueueMsg('slideToggle').enqueueMsg('slideToggle').unqueue();
                }, (200 * index2));
            });
        });
    };
</script>
<h3>
    Demos - Behaviors - Advanced Behaviors
</h3>
<hr />
<p>
    These demos are examples of some techniques you might use to create advanced behaviors
    and effects.
</p>
<div class="span1 col1 right center">
    <a class="center" href="downloads/demos/behaviors/advanced/animals.zip">
        <div class="download center">
        </div>
    </a>
</div>
<h3>
    Animals
</h3>
<hr />
<p>
    This demo shows how you might combine object oriented javascript with a behavior
    front-end and use the bootloader to pull in resources when they are requested.</p>
<p>
    Click the animal pictures to make them speak.
</p>
<div style="height: 400px;">
    <div class="pet" data-behaviors-lazy="Docs.Demos.Lib.PetBehavior" data-voice-box="voiceBox"
        data-name="Turtle" data-type="Pet">
        <input type="button" value="Walk" onclick="$(this).parent().msg('walk')" />
        <input type="button" value="Do Business" onclick="$(this).parent().msg('doBusiness')" />
        <input type="button" value="Check Box" onclick="$(this).parent().msg('checkBox')" /><br />
        <img src="images/turtle.gif" class="pointer" onclick="$(this).parent().msg('speak')" /><br />
        <div style="height: 20px;">
            <span id="voiceBox" class="voice toggle-off"></span>
        </div>
    </div>
    <div class="pet" data-behaviors-lazy="Docs.Demos.Lib.PetBehavior" data-voice-box="voiceBox2"
        data-name="Taboo" data-type="Dog">
        <input type="button" value="Walk" onclick="$(this).parent().msg('walk')" />
        <input type="button" value="Do Business" onclick="$(this).parent().msg('doBusiness')" />
        <input type="button" value="Check Box" onclick="$(this).parent().msg('checkBox')" /><br />
        <img src="images/dog.gif" class="pointer" onclick="$(this).parent().msg('speak')" /><br />
        <div style="height: 20px;">
            <span id="voiceBox2" class="voice toggle-off"></span>
        </div>
    </div>
    <div class="pet" data-behaviors-lazy="Docs.Demos.Lib.PetBehavior" data-voice-box="voiceBox3"
        data-name="Linq" data-type="Cat">
        <input type="button" value="Walk" onclick="$(this).parent().msg('walk')" />
        <input type="button" value="Do Business" onclick="$(this).parent().msg('doBusiness')" />
        <input type="button" value="Check Box" onclick="$(this).parent().msg('checkBox')" /><br />
        <img src="images/cat.gif" class="pointer" onclick="$(this).parent().msg('speak')" /><br />
        <div style="height: 20px;">
            <span id="voiceBox3" class="voice toggle-off"></span>
        </div>
    </div>
</div>
<div class="span1 col1 right center">
    <a class="center" href="downloads/demos/behaviors/advanced/funkysquares.zip">
        <div class="download center">
        </div>
    </a>
</div>
<h3>
    Funky Squares
</h3>
<hr />
<p>
    Funky squares uses a separate "funkySlide()" method to invoke messages against all
    the cloned squares. It's mostly just for fun, but demonstrates the power of closures
    in behaviors since each square is wired up with distinct instances of the same behaviors.
</p>
<div id="slider1" class="square mas slider" data-behaviors-lazy="Docs.Demos.Queueable.Toggler Docs.Demos.Queueable.Slider Docs.Demos.Queueable.SlideToggler"
    data-slide-time="2000" data-slide-distance="200" data-toggle-class="bg-red bg-green">
    <div class="square bg-red pointer toggle-on" onclick="$('#slider1').enqueueMsg('slideToggle').enqueueMsg('slideToggle').unqueue()">
    </div>
</div>
<input type="button" value="Clone Square" onclick="$('.clonespace').msg('clone', 'slider1')" />
<input type="button" value="Message Sliders" onclick="$('.slider').msg('slideToggle')" />
<input type="button" value="Broadcast Sliders" onclick="$('.clonespace').broadcast('slideToggle')" />
<input type="button" value="Funky Slide" onclick="funkySlide()" />
<br />
<br />
<div id="clonespace" class="clonespace" data-behaviors-eager="Docs.Demos.Cloner">
</div>
<div id="clonespace2" class="clonespace" data-behaviors-eager="Docs.Demos.Cloner">
</div>
<div id="clonespace3" class="clonespace" data-behaviors-eager="Docs.Demos.Cloner">
</div>
<div id="clonespace4" class="clonespace" data-behaviors-eager="Docs.Demos.Cloner">
</div>
